<!-- 二次封装弹窗组件，支持透传 -->
<template>
  <Teleport to="body">
    <div class="box">
      <el-dialog
        v-model="dialogVisible"
        draggable
        v-bind="attrs"
        :close-on-click-modal="false"
      >
        <slot></slot>
        <template v-for="(_, name) in slots" #[name]="scopedData">
          <slot :name="name" v-bind="scopedData"></slot>
        </template>
        <template #footer>
          <div class="dialog-footer" v-if="props.showFooterBtn">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirm"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </Teleport>
</template>
  
  <script  setup >
import { ref, useSlots, useAttrs } from "vue";

const passData = ref({});
const props = defineProps({
  showFooterBtn: {
    type: Boolean,
    default: true, // 默认值为 true
  },
});
const emits = defineEmits(["confirm"]);
const slots = useSlots();
const attrs = useAttrs();
const dialogVisible = ref(false);
const confirm = () => {
  emits("confirm", passData.value);
};
const show = (e = {}) => {
  if (e) passData.value = e;
  dialogVisible.value = true;
};
const hide = () => {
  dialogVisible.value = false;
};
defineExpose({ show, hide });
</script>
<!-- <style scoped>
.pop {
  left: -50vw;
}
:deep(.el-dialog.is-draggable.pop) {
  /* background-color: transparent; */
  background: rgba(46, 93, 80, 0.5);
  border: 1px solid rgba(92, 166, 144, 0.6);
  * {
    color: white;
    background: rgba(46, 93, 80, 0.5);
  }
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
}
:deep(.el-dialog__body) {
  padding: 0 20px 20px 20px;
}
:deep(.el-overlay-dialog) {
  pointer-events: auto;
  overflow: auto;
}
</style> -->